//获取页面元素
var oUl = document.getElementById('banner');//图片区域
var oLeftBtn = document.getElementById('btnLeft');
var oRightBtn = document.getElementById('btnRight');
var oLis = oUl.getElementsByTagName('li');
var oIcons = document.getElementById('ico').getElementsByTagName('a');
//克隆第一张图片放在最后一张
var oLastLi = oLis[0].cloneNode(true);
oUl.appendChild(oLastLi);

var oBtn = 0;
//左箭头
oLeftBtn.onclick = function () {
    oBtn --;
    move(oBtn);
}
//右箭头
oRightBtn.onclick = function () {
    oBtn ++;
    move(oBtn);
}
//小图片
for (var i = 0;i < oIcons.length ;i++) {
    oIcons[i].index = i;
    oIcons[i].onclick = function () {
        //修改ul的左偏移
        move(this.index);
    }
}
/*function run()
{
    timer = setInterval(function () {
        oBtn ++;
        move(oBtn);
    }, 2000);
}
run();*/

//移动函数
function move(index)
{
    if (index < 0){
        oUl.style.left = -(oLis.length - 1) * 980 + 'px';
        index = oLis.length - 2;
    }
    if (index > oLis.length - 1){
        oUl.style.left = 0;
        index = 1;
    }
    // oUl.style.left = -index * 980 + 'px';
    //平滑移动
    animator(oUl,{left:-index*980}, 8);
    //大图片和小图片对应起来
    for (var i = 0; i < oIcons.length ; i ++ ){
        oIcons[i].className = '';
    }
    if (index == oLis.length - 1){
        oIcons[0].className = 'active';
    }
    //大图比小图多出一张，所以需要判断一下
    if(index>=oIcons.length){
        oIcons[0].className = 'active';
    }else{
        oIcons[index].className = 'active';
    }
    oBtn = index;
    document.title = oBtn;
}
